<template>
	<el-dialog title="编辑" :visible.sync="dialogFormVisible">
		<el-form :model="form">
			<el-form-item label="用户名" :label-width="formLabelWidth">
				<el-input v-model="form.userName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="头像" :label-width="formLabelWidth">
				<img :src="$store.state.imgShowRoad2 + '/file/' + form.avatar" class="avatar"/>
				<el-upload
				  class="orders-img_el_upload"
				  :action="upurl"
				  :limit="3"
				  list-type="picture-card"
				  :on-change="handleChange"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :on-success="handleSuccess"
				  :on-error="handleError"
				  :file-list="fileList"
				  :class="{ disUoloadSty: noneBtnImg }"
				  ref="upload">
				  <span class="orders-img_el_upload_btn" @click.stop="submitUpload">添加图片</span>
				</el-upload>
			</el-form-item>
			<el-form-item label="昵称" :label-width="formLabelWidth">
				<el-input v-model="form.nickname" autocomplete="off"></el-input>
			</el-form-item>
			<!-- <el-form-item label="用户身份" :label-width="formLabelWidth">
				<el-input v-model="form.role" autocomplete="off"></el-input>
			</el-form-item> -->
			<el-form-item label="手机号" :label-width="formLabelWidth">
				<el-input v-model="form.phone" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="电子邮件" :label-width="formLabelWidth">
				<el-input v-model="form.email" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="地址" :label-width="formLabelWidth">
				<el-input v-model="form.address" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="editorUser">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import userApi from "@/api/user.js"
	export default {
		components: {
		},
		data() {
			return {
				dialogImageUrl: "",
				dialogVisible: false,
				showBtnImg: true,
				noneBtnImg: false,
				limitCountImg: 3,
				upurl: "/api/file/upload/avatar",
				fileList: [],
				imgurl: "",
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					id: "",
					userName: "",
					avatar: "",
					nickname: "",
					phone: "",
					role: "",
					address: "",
					email: ""
				},
				formLabelWidth: '120px'
			};
		},
		methods: {
			async editorUser() {
				const res = await userApi.editorUser("/znUsers/editorUser", {
					id: this.form.id,
					userName: this.form.userName,
					nickname: this.form.nickname,
					address: this.form.address,
					avatar: this.form.avatar,
					phone: this.form.phone,
					email: this.form.email,
				});
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.$message.success("修改成功");
					this.$parent.UserAll();
					this.$refs.upload.clearFiles();
				}
				
			},
			handleError(err, file, fileList) {
			  this.$message({
			    message: "上传失败！",
			    type: "success",
			  });
			  console.log(err);
			},
			handleSuccess(response, file, fileList) {
			  if (file.response.flag == true) {
			    this.fileList = fileList;
			    this.form.avatar = file.response.data;
			    if (fileList.length >= 3) {
			      this.uploadDisabled = true;
			    }
			    alert(file.response.message);
			  } else {
			    alert(file.response.data);
			  }
			},
			handleChange(file, fileList) {
			  this.noneBtnImg = fileList.length >= this.limitCountImg;
			},
			handleRemove(file, fileList) {
			  this.noneBtnImg = fileList.length >= this.limitCountImg;
			  this.fileList.pop();
			  // this.form.photo = "";
			  this.uploadDisabled = false;
			},
			handlePreview(file) {
			  this.dialogImageUrl = file.url;
			  this.dialogVisible = true;
			},
			submitUpload() {
			  this.$refs.upload.submit();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.avatar {
	  float: left;
	  width: 148px;
	  height: 148px;
	  border-radius: 3%;
	  margin-right: 10px;
	  }
</style>